<template>
  <div>
    <div class="nav-top" @mouseleave="leave">
      <div style="width: 1200px;margin: 0 auto">
      <div class="nav-top-left"  @mouseenter="change"><h2>全部商品分类</h2></div>
      <div class="nav-top-right">
        <a href="">服装城</a>
        <a href="">美妆馆</a>
        <a href="">尚品汇超市</a>
        <a href="">全球购</a>
        <a href="">闪购</a>
        <a href="">团购</a>
        <a href="">有趣</a>
        <a href="">秒杀</a>
      </div>
      </div>
    </div>
    <div class="list" :style="[aa]" v-show="isShow" >
      <!--      把点击事件放在父级标签上面，是事件委托(即不需要给每一个a标签多携带这个事件了,他用到了事件冒泡,
            会从里面往外执行)-->
      <div class="list-left" @click="goSearch" :style="dd" @mouseleave="changeIndex()" @mouseenter="change">
        <div
            class="item"
            v-for="(c1, index) in categoryList"
            :key="c1.categoryId"
        >
          <h3 >
            <a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId">{{ c1.categoryName }}</a>
          </h3>
          <div
              class="item-list clearfix" :style="cc">
            <div class="subitem"   v-for="(c2, index) in c1.categoryChild" :key="c2.categoryId">
              <dl>
                <dt>
                  <a :data-categoryName="c1.categoryName" :data-category2Id="c2.categoryId">{{ c2.categoryName }}</a>
                </dt>
                <dd>
                  <em
                      v-for="(c3, index) in c2.categoryChild"
                      :key="c3.categoryId"
                  >
                    <a :data-categoryName="c1.categoryName" :data-category3Id="c3.categoryId">{{ c3.categoryName }}</a>
                    <!--                给每一个a标签多携带一个data-categoryName(用来判断是a标签而不是h3，dl等其他标签和)和data-categoryid携带参数并判断是哪个商品-->
                  </em>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
      <div class="list-main" v-show="show">
        <Carousel :list="bannerList"/>
<!--        上面是对轮播图功能组件的封装-->
      </div>
      <div class="list-right" v-show="show">
        <div class="news">
          <h4><em>尚品汇快报</em><span>更多></span></h4>
          <ul>
            <li><span>[特惠]</span>备战开学季 全民半价购数码</li>
            <li><span>[公告]</span>备战开学季 全民半价购数码</li>
            <li><span>[特惠]</span>备战开学季 全民半价购数码</li>
            <li><span>[公告]</span>备战开学季 全民半价购数码</li>
            <li><span>[特惠]</span>备战开学季 全民半价购数码</li>
          </ul>
        </div>
        <div class="life">
          <ul>
            <li>话费</li>
            <li>机票</li>
            <li>电影票</li>
            <li>游戏</li>
            <li>彩票</li>
            <li>加油站</li>
            <li>酒店</li>
            <li>火车票</li>
            <li>众筹</li>
            <li>理财</li>
            <li>礼品卡</li>
            <li>白条</li>
          </ul>
          <img src="../../../assets/img/role.png"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ListContainer from '../ListContainer/index.vue';
import throttle from "loadsh/throttle";
import {mapState} from "vuex";
export default {
  name: "TypeNav",
components:{
    ListContainer,
},
  created() {
    if (this.$route.path!='/home') {
      this.isShow = false
      console.log(4)
    }
  },

  data() {
    return {
      currentIndex: -1,
      show:true,
      isShow:true,
      aa:{height:'510px',left: '-495px',position: 'absolute'},
      cc:{
        position:'absolute',top:'0px',left:'210px',width:'750px'
      },
      dd:{backgroundColor:'white'}
    }
  },
  methods:{
    change(){
      if((this.$route.path != '/home')&&(this.show==false))
        this.isShow=true
    },
    leave(){
      if((this.$route.path != '/home'))
      this.isShow=false
    },
    changeIndex:throttle(function () {
      // this.currentIndex=index
      //节流操作,不要使用箭头函数,否则会改变this指向
      // console.log(this.currentIndex)
      if(this.$route.path != '/home') this.isShow=false
    }),
    goSearch() {
      let element=event.target
      let { categoryname,category1id,category2id,category3id}=element.dataset
      if(categoryname){//先判断是否点击了a标签
        let location={name:'search'};//router中必须携带name(因为是根据name来进行跳转的)
        let query={categoryName:categoryname};
        if(category1id){  //判断是哪一级的标签并且给定相应的参数
          query.category1Id=category1id
        }else if(category2id){
          query.category2Id=category2id
        }else{
          query.category3Id=category3id
        }
        if(this.$route.params) {//当你搜索进入时,没有query
          console.log('pa'+this.$route.params)
          location.query = query;//给location添加query参数
          console.log(location)
          this.$router.push(location)
          //使用push(编程式导航)而不是router-link(声明式导航,是一个组件实例)是因为(占内存)他会造成卡顿现象
        }
      }
    }
  },
  mounted() {
    if(this.$route.path != '/home'){
      this.show=false
    }else{
      this.aa=null, //当在search页面时,让其绑定的样式消失
      this.cc=null
    }
  },
  computed: {
    ...mapState({
      //这是vuex提供的函数,直接使用函数名可以直接用(是一个语法糖,直接获取state里面的数据不能用箭头函数,而是用普通函数)
      categoryList: state => state.categoryList.data,
      bannerList:state=>state.bannerList.data,
      floorList: state=>state.floorList.data
    }),
  },
};
</script>
<style scoped lang="less">
//.sort-enter{
//  height: 0px;
//  transform: rotate(0deg);
//}
//.sort-enter-to{
//  height: 461px;
//  transform: rotate(360deg);
//}
//.sort-enter-active{
//  transition: all .5s linear;
//}
.swiper-container{
  transform:translate3d(0,0,0);
  overflow:hidden;
}
.swiper-slide{
  transform:translate3d(0,0,0);
}
</style>
